import { quick_func_float_staticNode } from './cla_quick_func_float_staticNode';

import { quick_func_float_eventBind } from './cla_quick_func_float_eventBind';

import {
  prop_keyVal_float_border_dom__quick_func_targetEl_id,
  quick_func_float_win_load_left,
  quick_func_float_win_load_top,
  spacename_quick_func_float,
} from '../DataDefine/sourceData';
import { create_ListenEvent_mana } from '../../../../../global/element/Event/listenEvent_mana';
import {
  appearEl_child_func,
  appearEl_child_func_promise,
  appearElFunc_promise,
  disappearEl_child_func_promise,
  disappearElFunc,
  disappearElFunc_promise,
  packNode,
} from '../../../../../global/element/Func';
import { delay } from '../../../../../global/Func/uniFunc/Func';
import { remove_class } from '../../../../../global/element/class_operate/Func';
import { css_disnone } from '../../../../DataDefine/sourceData';
import { global_delay_appear } from '../../../../../global/DataDefine/sourceData';
import { css_focusDisplay_default } from '../../../../globalComps/DataDefine/sourceData';
import {
  css_cur_focusDisplay_posi_cla,
  css_focusDisplay_whiteSpace_blur_cla,
  cssVar_focusDisplay_dom_left,
  cssVar_focusDisplay_dom_top,
} from '../../../pages/main/comps/float_setting/DataDefine/sourceData';
import { listenCssVar_mana } from '../../../../../global/element/css/Func/listenCssVar/classes/cla_listenCssVar_mana';
import { css_circle } from '../../../../../css';
import { drag_win_load_set_get } from '../../../../../global/direct/drag';

const quick_func_float_dataManaTag = 'quick_func_float_dataMana';

const delay_remove_circle = 100;

/**
 * @type {drag_win_load_set_get}
 */
let drag_win_load_set_get_obj;

class quick_func_float_dataMana extends quick_func_float_staticNode {
  get [Symbol.toStringTag]() {
    return quick_func_float_dataManaTag;
  }

  constructor(props) {
    super(props);
    this.cssVar_obj_focusDisplay = new listenCssVar_mana(this.focusDisplay_dom);
    drag_win_load_set_get_obj = new drag_win_load_set_get(
      this.quick_func_float_border_dom,
      quick_func_float_win_load_top,
      quick_func_float_win_load_left
    );

    this.#init_win_load_posi();
  }

  /**
   * 事件 绑定 this
   */
  eventBind = new quick_func_float_eventBind();

  /**
   * 事件 监听管理
   */
  eventM = create_ListenEvent_mana(spacename_quick_func_float);

  /**
   * css 变量 监控 -- 焦点元素
   * @type {listenCssVar_mana}
   */
  cssVar_obj_focusDisplay;

  /**
   * 指定 提汲容器 元素
   * @type {HTMLElement}
   */
  targetEl;

  /**
   * @func 元素 主体
   */

  /**
   * 给主体 元素 延迟 移除 圆形 结构
   */
  border_dom_css_circle_remove() {
    setTimeout(() => {
      remove_class(this.quick_func_float_border_dom, css_circle);
    }, delay_remove_circle);
  }

  /**
   * 给主体 元素 延迟 添加 圆形 结构
   */
  border_dom_css_circle_add() {
    remove_class(this.quick_func_float_border_dom, css_circle, true);
  }

  /**
   * @func 提汲容器
   */

  /**
   * 获取 当前 的 提汲容器 id
   */
  get_targetEl_id_for_quick_func_float() {
    return this.quick_func_float_border_dom.getAttribute(
      prop_keyVal_float_border_dom__quick_func_targetEl_id
    );
  }

  /**
   * 将 提汲容器 中 的 元素 全 挂载到 焦点元素 容器
   */
  packNode_targetEl_to_focusDisplay_dom_container(cb = empty_func) {
    // for (const child_node of this.targetEl.children) {
    //   console.log(child_node.id);
    //   // 打包 元素 到 setting_list
    //   packNode(this.focusDisplay_dom_container, child_node);
    // }

    do {
      const child_node = this.targetEl.firstElementChild;
      packNode(this.focusDisplay_dom_container, child_node);
    } while (this.targetEl.firstElementChild != null);

    cb.call(this);
  }

  /**
   * 将 提汲容器 中 的 元素 全挂载到 快速功能 视窗
   */
  packNode_targetEl_to_quick_view_container() {
    do {
      const child_node = this.targetEl.firstElementChild;
      packNode(this.quick_func_float_view_container_dom, child_node);
    } while (this.targetEl.firstElementChild != null);
  }

  /**
   * @func 焦点元素
   */

  /**
   * 开启 浮动元素 系列操作
   */
  open_focusDisplay_func() {
    this.#locate_focusDisplay_dom();

    // 显示 浮动元素
    this.focusDisplay_dom.showModal();

    this.#open_focusDisplay_operate();
  }

  /**
   * 定位 当前位置
   */
  #locate_focusDisplay_dom() {
    // 移除 默认的 样式
    remove_class(this.focusDisplay_dom, css_focusDisplay_default);

    remove_class(
      this.focusDisplay_dom,
      css_focusDisplay_whiteSpace_blur_cla,
      true
    );

    // 添加 当前位置 定义 的 class
    remove_class(this.focusDisplay_dom, css_cur_focusDisplay_posi_cla, true);

    let cur_computed_main_float = getComputedStyle(
      this.quick_func_float_border_dom
    );

    // 设置 --top
    this.cssVar_obj_focusDisplay.setCssVar(
      cssVar_focusDisplay_dom_top,
      cur_computed_main_float.getPropertyValue(cssVar_focusDisplay_dom_top)
    );

    // 设置 --left
    this.cssVar_obj_focusDisplay.setCssVar(
      cssVar_focusDisplay_dom_left,
      cur_computed_main_float.getPropertyValue(cssVar_focusDisplay_dom_left)
    );
  }

  /**
   * 显示 focusDisplay_dom 动画
   */
  #open_focusDisplay_operate() {
    remove_class(this.focusDisplay_dom, css_disnone, true);

    // 将元素 打包到 浮动元素
    this.packNode_targetEl_to_focusDisplay_dom_container(() => {
      appearEl_child_func(this.focusDisplay_dom, 'both');

      setTimeout(() => {
        remove_class(this.focusDisplay_dom, css_disnone);
      }, global_delay_appear);
    });
  }

  /**
   * 关闭 浮动元素 系列操作
   */
  async cancel_focusDisplay_func() {
    await this.#cancel_focusDisplay_operate();
  }

  /**
   * 取消 当前 浮动元素 操作
   */
  async #cancel_focusDisplay_operate() {
    this.border_dom_css_circle_add();

    await this.view_container_disappear();

    await this.packNode_focusDisplay_dom_container_to_targetEl();

    await this.icon_appear();
  }

  /**
   * 将 焦点元素 中的 元素 归置 提汲容器
   */
  packNode_focusDisplay_dom_container_to_targetEl() {
    let promise_arr = [];

    for (const child_node of this.quick_func_float_view_container_dom
      .children) {
      let p = new Promise((resolve) => {
        // 应用 显示放大 动画
        disappearElFunc(child_node, 'both', () => {
          // 打包 元素 到 setting_list
          packNode(this.targetEl, child_node);

          resolve();
        });
      });

      promise_arr.push(p);
    }

    return Promise.all(promise_arr);
  }

  /**
   * @func noSingle 无 快速功能
   */

  /**
   * 无 快速功能 提示 显示动画
   */
  async no_single_appear() {
    await appearElFunc_promise(this.quick_func_onSingle_dom, 'both');
  }

  /**
   * 无 快速功能 提示 消失动画
   */
  async no_single_disappear() {
    await disappearElFunc_promise(this.quick_func_onSingle_dom, 'both');

    remove_class(this.quick_func_onSingle_dom, css_disnone, true);
  }

  /**
   * 在 没有 选定 快速功能 元素 时 显示 没有 提汲容器
   */
  async no_single_func() {
    await this.icon_disappear();

    this.border_dom_css_circle_remove();

    await this.no_single_appear();

    await delay(1000);

    this.border_dom_css_circle_add();

    await this.no_single_disappear();

    await this.icon_appear();
  }

  /**
   * @func icon 快速功能 图标
   */

  /**
   * 快速功能 图标 显示动画
   * @param {function} cb 延迟 后续 操作
   */
  async icon_appear() {
    await appearElFunc_promise(this.quick_func_icon_dom, 'both');
  }

  /**
   * 快速功能 图标 消失动画
   */
  async icon_disappear() {
    await disappearElFunc_promise(this.quick_func_icon_dom, 'both');

    // 应用 icon 图标消失
    remove_class(this.quick_func_icon_dom, css_disnone, true);
  }

  /**
   * @func 快速功能 视窗
   */

  /**
   * 快速功能 视窗 显示动画
   */
  async view_container_appear() {
    await appearEl_child_func_promise(
      this.quick_func_float_view_container_dom,
      'both'
    );
  }

  /**
   * 快速功能 视窗 消失动画
   */
  async view_container_disappear() {
    await disappearEl_child_func_promise(
      this.quick_func_float_view_container_dom,
      'both'
    );

    remove_class(this.quick_func_float_view_container_dom, css_disnone, true);
  }

  /**
   * 将 快速功能 容器 视窗 元素 全 归置
   * @param {Function} cb
   */
  packNode_quick_view_container_to_targetEl(cb) {
    let promise_arr = [];

    for (const child_node of this.quick_func_float_view_container_dom
      .children) {
      let p = new Promise((resolve) => {
        // 应用 显示放大 动画
        disappearElFunc(child_node, 'both', () => {
          // 打包 元素 到 setting_list
          packNode(this.targetEl, child_node);

          resolve();
        });
      });

      promise_arr.push(p);
    }

    Promise.all(promise_arr).then(() => {
      cb.call(this);
    });
  }

  async open_view_container_func() {
    // 显示 浮动元素
    await this.#open_view_container_operate();
  }

  /**
   * 开启 快速功能 视窗 操作
   */
  async #open_view_container_operate() {
    // 将元素 打包到 快速功能 视窗
    this.packNode_targetEl_to_quick_view_container();

    await this.icon_disappear();

    this.border_dom_css_circle_remove();

    await this.view_container_appear();
  }

  /**
   * 关闭 浮动元素 系列操作
   */
  async cancel_view_container_func() {
    await this.#cancel_view_container_operate();
  }

  /**
   * 取消 当前 浮动元素 操作
   */
  async #cancel_view_container_operate() {
    this.border_dom_css_circle_add();

    await this.view_container_disappear();

    await this.packNode_focusDisplay_dom_container_to_targetEl();

    await this.icon_appear();
  }

  /**
   * @func 全局属性 if has 设定 border style top left
   */

  /**
   * 根据 win_load
   */
  #init_win_load_posi() {
    // let top = win_load.get_winload_key(quick_func_float_win_load_top);

    // let left = win_load.get_winload_key(quick_func_float_win_load_left);

    // if (top != null || left != null) {
    //   top = top || 0;
    //   left = left || 0;
    //   set_dragEl_top_left(this.quick_func_float_border_dom, top, left);
    // }

    drag_win_load_set_get_obj.init_win_load_posi();
  }

  /**
   * win_load 记录 当前 坐标信息
   */
  set_cur_posi() {
    this.#set_win_load_posi();
  }

  /**
   * win_load 设置 当前 坐标信息
   */
  #set_win_load_posi() {
    // let top = this.quick_func_float_border_dom.style.getPropertyValue('--top');
    // let left =
    //   this.quick_func_float_border_dom.style.getPropertyValue('--left');

    // win_load.set_winload_key_val(quick_func_float_win_load_top, top);
    // win_load.set_winload_key_val(quick_func_float_win_load_left, left);
    drag_win_load_set_get_obj.set_cur_posi();
  }
}

function empty_func() {}

export { quick_func_float_dataMana };
